	var myDiagram = null;
	var hasPermission = function() {
        var module = "module=" + "水平衡模块";
        var function_ = "function_=" + "数据编辑";
        var urlString = '/login_control/query_permission?' + module + '&' + function_;
//           console.log(urlString);
        $.ajax({
            type : 'get',
            url : urlString,
            success : function(data) {
//                   console.log(data);
                if (data['result'] >= 1) {
                    $('#SaveButton').show();
                }
                else {
                    $('#SaveButton').hide();
                }
            }
        });
    }
	function init() {
	    hasPermission();
		if (window.goSamples)
			goSamples(); // 对于这些样本，你不需要这样称呼

		var objGo = go.GraphObject.make; // 创建画布
		myDiagram = objGo(go.Diagram, "myDiagramDiv", // 必须命名或引用div html元素
		{
			allowDrop : true, // 允许拖放
			"draggingTool.dragsLink" : true,//设置可以拖动单个连接线条
			"draggingTool.isGridSnapEnabled" : true,//拖动或复制的零件将捕捉到网格上的点
			"linkingTool.isUnconnectedLinkValid" : true,//获取或设置部分或完全未连接的连接有效。
			"linkingTool.portGravity" : 20,//获取或设置链接捕捉发生的距离。 默认值为100.0。 该值必须是非负的。 设置此属性不会引发任何事件。
			"relinkingTool.isUnconnectedLinkValid" : true,
			"relinkingTool.portGravity" : 20,
			//获取或设置一个小GraphObject，该GraphObject被复制为链接“from”端所选链接路径的重新链接句柄。 默认情况下，这是一个小蓝钻石的形状。 设置此属性不会引发任何事件。
			"relinkingTool.fromHandleArchetype" : objGo(go.Shape, "Diamond", {
				segmentIndex : 0,
				cursor : "pointer",
				desiredSize : new go.Size(8, 8),
				fill : "tomato",
				stroke : "darkred"
			}),
			"relinkingTool.toHandleArchetype" : objGo(go.Shape, "Diamond", {
				segmentIndex : -1,
				cursor : "pointer",
				desiredSize : new go.Size(8, 8),
				fill : "darkred",
				stroke : "tomato"
			}),

			//获取或设置一个小GraphObject，该GraphObject在所选链接路径中的每个可移动点处(即线条的每个拐角处)作为重塑形状句柄进行复制。 默认情况下，这是一个小蓝色矩形的Shape。 设置此属性不会引发任何事件
			"linkReshapingTool.handleArchetype" : objGo(go.Shape, "Diamond", {
				desiredSize : new go.Size(7, 7),
				fill : "lightblue",
				stroke : "deepskyblue"
			}),
			rotatingTool : objGo(TopRotatingTool), // defined below
			"rotatingTool.snapAngleMultiple" : 15,//获取或设置所选对象的首选角度。 默认值为45度，这意味着如果实际角度接近该倍数，则自动优选45度的倍数角度。snapAngleMultiple的值为零导致根本没有捕捉。
			"rotatingTool.snapAngleEpsilon" : 15,// 紧密度由snapAngleEpsilon属性决定。 
			//"ChangedSelection" : onSelectionChanged,
			//"TextEdited" : onTextEdited,
			"undoManager.isEnabled" : true
		//允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键
		});


		function makePort(name, spot, output, input) {
			// the port is basically just a small transparent square
			return objGo(go.Shape, "Circle", {
				fill : null, // 填充 not seen, by default; set to a translucent gray by showSmallPorts, defined below
				stroke : null,//边框,线条
				desiredSize : new go.Size(7, 7),
				alignment : spot, // 对齐该形状的端口
				alignmentFocus : spot, // 设置端口在形状里面
				portId : name, // 将此对象声明为“端口”
				fromSpot : spot,
				toSpot : spot, // 声明链接可以在此端口连接的位置
				fromLinkable : output,
				toLinkable : input, // 声明用户是否可以在此处绘制链接
				cursor : "pointer" // 显示“小手”的光标
			});
		}

		//选中节点后的节点样式 ，自定义选中边框模版
		var nodeSelectionAdornmentTemplate = objGo(go.Adornment, "Auto",//设置装饰框
		objGo(go.Shape, {
			fill : null,
			stroke : "deepskyblue",
			strokeWidth : 1.5,
			strokeDashArray : [ 4, 2 ]
		}),//strokedasharray属性用于创建虚线，循环[4, 2]，第一个是为线长，第二个为空长
		objGo(go.Placeholder)//占位符，此只读属性返回此装饰可能包含在其可视树中的占位符。
		);

		//自定义边框上的小矩形
		var nodeResizeAdornmentTemplate = objGo(go.Adornment, "Spot",//{ locationSpot: go.Spot.Right },  //设置这次的装饰是“点”
		objGo(go.Placeholder), objGo(go.Shape, {
			alignment : go.Spot.TopLeft,
			cursor : "nw-resize",
			desiredSize : new go.Size(6, 6),
			fill : "lightblue",
			stroke : "deepskyblue"
		}), objGo(go.Shape, {
			alignment : go.Spot.Top,
			cursor : "n-resize",
			desiredSize : new go.Size(6, 6),
			fill : "lightblue",
			stroke : "deepskyblue"
		}), objGo(go.Shape, {
			alignment : go.Spot.TopRight,
			cursor : "ne-resize",
			desiredSize : new go.Size(6, 6),
			fill : "lightblue",
			stroke : "deepskyblue"
		}),

		objGo(go.Shape, {
			alignment : go.Spot.Left,
			cursor : "w-resize",
			desiredSize : new go.Size(6, 6),
			fill : "lightblue",
			stroke : "deepskyblue"
		}), objGo(go.Shape, {
			alignment : go.Spot.Right,
			cursor : "e-resize",
			desiredSize : new go.Size(6, 6),
			fill : "lightblue",
			stroke : "deepskyblue"
		}),

		objGo(go.Shape, {
			alignment : go.Spot.BottomLeft,
			cursor : "se-resize",
			desiredSize : new go.Size(6, 6),
			fill : "lightblue",
			stroke : "deepskyblue"
		}), objGo(go.Shape, {
			alignment : go.Spot.Bottom,
			cursor : "s-resize",
			desiredSize : new go.Size(6, 6),
			fill : "lightblue",
			stroke : "deepskyblue"
		}), objGo(go.Shape, {
			alignment : go.Spot.BottomRight,
			cursor : "sw-resize",
			desiredSize : new go.Size(6, 6),
			fill : "lightblue",
			stroke : "deepskyblue"
		}));

		//自定义形状上面的旋转点 模板
		var nodeRotateAdornmentTemplate = objGo(go.Adornment, {
			locationSpot : go.Spot.Center,
			locationObjectName : "CIRCLE"
		}, objGo(go.Shape, "Circle", {
			name : "CIRCLE",
			cursor : "pointer",
			desiredSize : new go.Size(7, 7),
			fill : "lightblue",
			stroke : "deepskyblue"
		}), objGo(go.Shape, {
			geometryString : "M3.5 7 L3.5 30",
			isGeometryPositioned : true,
			stroke : "deepskyblue",
			strokeWidth : 1.5,
			strokeDashArray : [ 4, 2 ]
		}) //isGeometryPositioned 获取或设置此形状的GraphObject.position是否表示面板坐标中此形状的左上角或此几何体坐标系的原点。
		);

		//自定义一些节点模型 
		myDiagram.nodeTemplate = objGo(go.Node, "Spot", { 
			locationSpot : go.Spot.Center,	
		},
		/*objGo(go.Picture,
			{ margin: 10, width: 70, height: 70, background: "deepskyblue" },
			 new go.Binding("source")),*/
		
		new go.Binding("location", "loc", go.Point.parse)
				.makeTwoWay(go.Point.stringify), {
			selectable : true,
			selectionAdornmentTemplate : nodeSelectionAdornmentTemplate
		}, {
			resizable : true,
			resizeObjectName : "PANEL",
			resizeAdornmentTemplate : nodeResizeAdornmentTemplate
		}, {
			rotatable : true,
			rotateAdornmentTemplate : nodeRotateAdornmentTemplate
		}, new go.Binding("angle").makeTwoWay(),
		// the main object is a Panel that surrounds a TextBlock with a Shape

		objGo(go.Panel, "Auto", {
			name : "PANEL"
		}, new go.Binding("desiredSize", "size", go.Size.parse)
				.makeTwoWay(go.Size.stringify), objGo(go.Shape, "Rectangle", // default figure
		{
			portId : "", // the default port: if no spot on link data, use closest side
			fromLinkable : true,
			toLinkable : true,
			cursor : "pointer",
			fill : "white", // default color
			strokeWidth : 0
		}, new go.Binding("figure"), new go.Binding("fill")),

		objGo(go.TextBlock, {
			font : "bold 11pt Helvetica, Arial, sans-serif",
			margin : 8,
			maxSize : new go.Size(160, NaN),
			wrap : go.TextBlock.WrapFit,//换行
			editable : true
		//可编辑
		}, new go.Binding("text").makeTwoWay())),
		
		makePort("T", go.Spot.Top, false, true), 
		makePort("L", go.Spot.Left,true, true), 
		makePort("R", go.Spot.Right, true, true),
	    makePort("B", go.Spot.Bottom, true, false)
		);
		//选中线的样式
		var linkSelectionAdornmentTemplate = objGo(go.Adornment, "Link", objGo(
				go.Shape,
				// isPanelMain声明此Shape共享Link.geometry
				{
					isPanelMain : true,
					fill : null,
					stroke : "deepskyblue",
					strokeWidth : 0
				}) // use selection object's strokeWidth
		);

		//画线条
		myDiagram.linkTemplate = objGo(go.Link, // the whole link panel
		{
			selectable : true,
			selectionAdornmentTemplate : linkSelectionAdornmentTemplate
		}, {
			relinkableFrom : true,
			relinkableTo : true,
			reshapable : true
		}, {
			routing : go.Link.AvoidsNodes,//线条要避开节点

			//获取或设置从路径点生成路径的方式。 该值必须是None，Bezier，JumpGap或JumpOver之一。
			//将此属性设置为JumpOver或JumpGap需要图表在计算链接路由时执行大量计算。 如果您要定位慢速设备，请考虑不要使用包含大量链接的图表的Jump ...值。
			//默认值为None  - 每个链接段都是一条直线。
			curve : go.Link.JumpOver,
			corner : 5,//获取或设置当曲线为None，JumpGap或JumpOver时两个线段彼此正交时相邻线段的角的舍入程度。
			toShortLength : 4
		//获取或设置结束段与实际端口之间的距离。 负值会导致链接延伸到端口。
		}, new go.Binding("points").makeTwoWay(), objGo(go.Shape, // the link path shape
		{
			isPanelMain : true,
			strokeWidth : 2
		}), objGo(go.Shape, // 获取或设置当此形状的元素必须为字符串时此形状应采用的箭头类型的名称。
		{
			toArrow : "Standard",
			stroke : null
		}),

		objGo(go.Panel, "Auto", new go.Binding("visible", "isSelected")
				.ofObject(), objGo(go.Shape, "RoundedRectangle", // the link shape
		{
			fill : "#F8F8F8",
			stroke : null
		}), objGo(go.TextBlock, {
			textAlign : "center",
			font : "10pt helvetica, arial, sans-serif",
			stroke : "#919191",
			margin : 2,
			minSize : new go.Size(10, NaN),
			editable : true
		}, new go.Binding("text").makeTwoWay())));

		load(); //  // 从一些JSON文本加载初始图

		// 初始化页面左侧的Palette
		myPalette = objGo(go.Palette, "myPaletteDiv", // must name or refer to the DIV HTML element
		{
			maxSelectionCount : 1,
			nodeTemplateMap : myDiagram.nodeTemplateMap, // 分享myDiagram使用的模板

			linkTemplate : objGo(go.Link, {
				locationSpot : go.Spot.Center,
				selectionAdornmentTemplate : objGo(go.Adornment, "Link", {
					locationSpot : go.Spot.Center
				}, objGo(go.Shape, {
					isPanelMain : true,
					fill : null,
					stroke : "deepskyblue",
					strokeWidth : 0
				}), objGo(go.Shape, // the arrowhead
				{
					toArrow : "Standard",
					stroke : null
				}))
			}, {
				routing : go.Link.AvoidsNodes,
				curve : go.Link.JumpOver,
				corner : 5,
				toShortLength : 4
			}, new go.Binding("points"), objGo(go.Shape, // the link path shape
			{
				isPanelMain : true,
				strokeWidth : 2
			}), objGo(go.Shape, // the arrowhead
			{
				toArrow : "Standard",
				stroke : null
			})),

			model : new go.GraphLinksModel(

			[ // specify the contents of the Palette
				{text : "组件1",figure : "Rectangle",fill : "#9bc2e6"},
				{text : "组件2",figure : "Rectangle",fill : "yellow"},
				{text : "组件3",figure : "Rectangle",fill : "#e7e6e6"},
				{text : "组件4"}, 
				{text : "",figure : "Diamond",fill : "#5b9bd5"}, 
				{text : "",figure : "Triangle",fill : "red"}, 
				{text : "",figure : "Hexagon",fill : "#5b9bd5"}
			], [ {
				points : new go.List(go.Point).addAll([ new go.Point(0, 0),
						new go.Point(30, 0), new go.Point(30, 40),
						new go.Point(60, 40) ])
			} ])
		});
	}

	//RotatingTool用于通过设置GraphObject.angle属性以交互方式更改GraphObject的GraphObject.angle。
	function TopRotatingTool() {
		go.RotatingTool.call(this);
	}
	go.Diagram.inherit(TopRotatingTool, go.RotatingTool);

	TopRotatingTool.prototype.updateAdornments = function(part) {
		go.RotatingTool.prototype.updateAdornments.call(this, part);
		var adornment = part.findAdornment("Rotating");
		if (adornment !== null) {
			adornment.location = part.rotateObject
					.getDocumentPoint(new go.Spot(0.5, 0, 0, -30)); // above middle top
		}
	};

	TopRotatingTool.prototype.rotate = function(newangle) {
		go.RotatingTool.prototype.rotate.call(this, newangle + 90);
	};

	//  以JSON格式显示用户可编辑的图表模型
	function save() {
		saveDiagramProperties(); // do this first, before writing to JSON
		document.getElementById("mySavedModel").value = myDiagram.model
				.toJson();
		myDiagram.isModified = false;
		var name=$('#flowchart_name').val();
		var values = {"chartName":name,"data":myDiagram.model.toJson(), "companyId": label_water_bala_companyId};
//   		console.log(values);
		$.ajax({
			type : 'POST',
			data : JSON.stringify(values),
			contentType : 'application/json',
			dataType : 'json',
			url : "/wbalchart/insert",
			success : function(data) {
				if(data.status == "success"){
					bootoast({
                         message: '保存成功',
                         position: 'top',
                         type: 'success',
                         timeout: 1.5,
                     });
				}else{
					bootoast({
                         message: data.msg,
                         position: 'top',
                         type: 'danger',
                         timeout: 1.5,
                     });
				} 
			},
			error : function(e) {
				 bootoast({
                     message: '保存失败',
                     position: 'top',
                     type: 'danger',
                     timeout: 1.5,
                 });
			}
		});		
	}
	function load() {
		myDiagram.model = go.Model.fromJson(document
				.getElementById("mySavedModel").value);
		loadDiagramProperties(); // 在Model.modelData被带入内存后执行此操作
	}
	function saveDiagramProperties() {
		myDiagram.model.modelData.position = go.Point
				.stringify(myDiagram.position);
	}
	function loadDiagramProperties(e) {
		// 设置Diagram.initialPosition而不是Diagram.position，以处理初始化副作用
		var pos = myDiagram.model.modelData.position;
		if (pos)
			myDiagram.initialPosition = go.Point.parse(pos);
	}
	init();
	
	$("#btn_out").click(function() {
		$('#page-wrapper').load('pages/label_eva_wbal_chart.html');
	});
	
	
